<template>
  <div id="app">
    <div class="side-menu">
      <div class="menu-item" v-for="menu in menus" :key="menu.text" @click="handler(menu)">
        <i :class="menu.name"></i>
        <div>{{menu.text}}</div>
      </div>
    </div>
    <transition name="move">
      <RoomList :scenes="scenes" v-if="showRoom" @close="showRoom=false"/>
    </transition>
    <transition name="move">
      <ShopList
        :shops="shops"
        @addCar="progAdd"
        @BuyNow="BuyNow"
        v-if="showGoods"
        @close="showGoods=false"
      />
    </transition>
    <pop-up :isShowpop="isShowpop" :msg="msg"/>
    <div class="box"></div>
  </div>
</template>

<script>
import ShopList from "@components/shop-list";
import RoomList from "@components/room-list";
import PopUp from "@components/popUp";
import { http } from "@/public/js/http";
export default {
  name: "app",
  components: { ShopList, RoomList, PopUp },
  data() {
    return {
      selectGId: "",
      isFovorite: 1,
      menus: [
        {
          text: "收藏",
          name: "favorite"
        },
        {
          text: "商品",
          name: "goods"
        },
        {
          text: "房间",
          name: "room"
        },
        {
          text: "设计师",
          name: "designer"
        },
        {
          text: "户型图",
          name: "hx"
        }
      ],
      scenes: [],
      showRoom: false,
      showGoods: false,
      isShowpop: false,
      info: {},
      ids: [],
      msg: ""
    };
  },
  methods: {
    async getProgDetail() {
      const { data } = await http.post("prog/detail", {
        ...this.query
      });
      if (data.code == 0) {
        this.info = data.prog;
        this.isFovorite = data.prog.isCollect;
        this.ids = data.prog.gds.map(item => {
          return item.id;
        });
        this.menus[0].name = this.isFovorite ? "favorite2" : "favorite";
        this.menus[0].text = this.isFovorite ? "已收藏" : "收藏";
        this.loadScript().then(() => {
          const div = document.createElement("div");
          div.id = "krpano";

          document.body.appendChild(div);
          embedpano({
            xml: `${this.info.url}/tour.xml`,
            target: div.id,
            onready: () => {
              window.krpano = document.getElementById("krpanoSWFObject");
              window.krpano.addEventListener("click", () => {
                var x = krpano.get("mouse.x");
                var y = krpano.get("mouse.y");
                var pnt = krpano.screentosphere(x, y);
                var h = pnt.x;
                var v = pnt.y;
                this.addHot(h.toFixed(2), v.toFixed(2), x, y);
              });
              this.scenes = krpano.get("scene").getArray();
              setTimeout(() => {
                this.addSceneHot();
              }, 5000);
            }
          });
        });
      }
    },
    async progAdd() {
      const { data } = await http.post("cart/adds", {
        ids: JSON.stringify(this.ids),
        ...this.query
      });
      if (data.code == -2) {
        wx.miniProgram.navigateTo({ url: "/pages/login/index" });
      }
      if (data.code == 0) {
        this.showGoods = false;
        this.popup("加入购物车成功");
      }
    },
    // 添加收藏
    async favorite() {
      const { data } = await http.post("favor/add", {
        type: "prog",
        ...this.query
      });
      if (data.code == -2) {
        wx.miniProgram.navigateTo({ url: "/pages/login/index" });
      }
      if (data.code == 0) {
        this.menus[0].name = "favorite2";
        this.menus[0].text = "已收藏";
        this.popup("商品收藏成功");
      }
    },
    // 删除收藏
    async favorite2() {
      const { data } = await http.post("favor/del", {
        type: "prog",
        ...this.query
      });
      if (data.code == 0) {
        this.menus[0].name = "favorite";
        this.menus[0].text = "收藏";
        this.popup("取消收藏成功");
      }
    },
    BuyNow() {
      let gdIds = JSON.stringify(this.shops.map(item => item.id));
      wx.miniProgram.navigateTo({
        url: `/pages/con-order/index?gdids=${gdIds}`
      });
      this.showGoods = false;
    },
    handler(menu) {
      this.showRoom = false;
      this.showGoods = false;
      this[menu.name]();
    },
    addHot(h, v) {
      var hs_name = "hs" + ((Date.now() + Math.random()) | 0);

      krpano.call("addhotspot(" + hs_name + ")");
      krpano.set(
        "hotspot[" + hs_name + "].url",
        "https://xlylf-test.oss-cn-hangzhou.aliyuncs.com/krpano-1.19-pr8/skin/spot1.png"
      );
      krpano.set("hotspot[" + hs_name + "].ath", h);
      krpano.set("hotspot[" + hs_name + "].atv", v);
      krpano.set("hotspot[" + hs_name + "].distorted", true);
    },
    room() {
      this.showRoom = !this.showRoom;
    },
    goods() {
      this.showGoods = !this.showGoods;
      this.selectGId = "";
    },
    designer() {
      console.log("设计师");
    },
    addSpot(hs_name, h, v, url, onlick) {
      krpano.call("addhotspot(" + hs_name + ")");
      krpano.set("hotspot[" + hs_name + "].url", url);
      krpano.set("hotspot[" + hs_name + "].ath", h);
      krpano.set("hotspot[" + hs_name + "].atv", v);
      krpano.set("hotspot[" + hs_name + "].onclick", function() {
        onlick();
      });
    },
    hx() {
      let visible = window.krpano.get("layer['map'].visible");
      window.krpano.set("layer['map'].visible", !visible);
    },
    loadScript() {
      return new Promise(resolve => {
        const script = document.createElement("script");
        script.src = `${this.info.url}/tour.js`;
        script.onload = function() {
          resolve();
        };
        document.body.appendChild(script);
      });
    },
    addSceneHot() {
      if (this.info.contents) {
        const contents = JSON.parse(this.info.contents),
          name = krpano.get("xml.scene");
        contents.spots
          .filter(spot => spot.type != 2 && spot.scene == name)
          .forEach(spot => {
            this.addSpot(spot.name, spot.h, spot.v, spot.url, () => {
              if (spot.type == 0) {
                this.loadscene(spot.scene);
              } else if (spot.type == 1) {
                this.showGoods = true;
                this.selectGId = spot.attr.id;
              }
            });
          });
      }
    },
    loadscene(name) {
      krpano.call(`loadscene(${name})`);
      setTimeout(() => {
        this.addSceneHot();
      }, 5000);
    },
    popup(msg) {
      this.isShowpop = true;
      this.msg = msg;
      let time = setTimeout(() => {
        this.isShowpop = false;
      }, 2000);
    }
  },
  computed: {
    shops() {
      return this.selectGId
        ? this.info.gds.filter(item => item.id == this.selectGId)
        : this.info.gds;
    }
  },
  mounted() {
    this.query = this.$route.query;
    this.query.tid = this.query.id;
    this.getProgDetail();
  }
};
</script>
